import React, { Component, useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProCard from '@ant-design/pro-card';
// 导入的时候加{}，导出的时候会报错
import { Card, Alert, Typography, List, Empty, Button } from 'antd';
import ResourceCard from '@/components/ResourceCard';
import { getMyLinks } from '@/services/ant-design-pro/user';
import { Link } from 'umi';

const listGrid = {
  gutter: 16,
  xs: 1,
  sm: 1,
  md: 2,
  lg: 2,
  xl: 2,
  xxl: 2,
};

const pageSize = 4;

const UserRecommend = () => {
  const [loading, setLoading] = useState(false);
  const [resources, setResources] = useState([]);
  useEffect(() => {
    if (loading === false) {
      getMarkedLink();
      setLoading(true);
    }
  });

  // 获取个人收藏列表
  const getMarkedLink = async () => {
    try {
      const res = await getMyLinks();
      console.log(res);
      setResources(res.data);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <Card title="推荐记录">
        <List
          rowKey="id"
          grid={listGrid}
          // loading={loading}
          pagination={{
            showSizeChanger: false,
            pageSize,
            // total,
            onChange: () => {
              getMarkedLink();
            },
          }}
          dataSource={resources}
          renderItem={(item) => {
            return (
              <List.Item key={item.id}>
                <ResourceCard resourceId={item.id} recommend={true} />
              </List.Item>
            );
          }}
        />
      </Card>
    </div>
  );
};

export default UserRecommend;
